<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas{
            /* background-color: #ccc; */
        }
    </style>
</head>
<body>
    <canvas width="536" height="480"></canvas>
    <video src="./vedio/test1.mp4" controls></video>
    <script>
        var canvas=document.querySelector("canvas");
        var ctx=canvas.getContext("2d");
        var video=document.querySelector("video");

        function loadImage(src){
            return new Promise(function(resolve,reject){
                var img=new Image();
                img.src=src;
                img.onload=function(){
                    resolve(img);
                }
            })
        }


        init();
        async function init(){
            var img=await loadImage("./img/img_47.jpg");
            // 放在对应坐标
            ctx.drawImage(img,0,0);
            // 放在对应坐标，并且进行缩放
            ctx.drawImage(img,0,0,canvas.width,canvas.height);
            var img=await loadImage("./img/Item04-XXMT01.png");
            // 主要加载精灵图ctx.drawImage(图片,精灵图X坐标,精灵图Y坐标,精灵图元素宽度,精灵图元素高度,放置在的坐标X,放置在的坐标Y,放置的宽度,放置在的高度)
            ctx.drawImage(img,64,96,32,32,100,100,64,64)
        }

        // var bool=false;
        // video.addEventListener("play",playHandler);
        // video.addEventListener("pause",playHandler);
        // video.addEventListener("stop",playHandler);
        // animation();
        // 触发事件比较慢，暂时不使用
        // video.addEventListener("timeupdate",updateHandler);

        // function updateHandler(e){

        // }



        function playHandler(e){
            bool=e.type=="play";
        }

        function animation(){
            requestAnimationFrame(animation);
            if(!bool) return;
            ctx.drawImage(video,0,0);
            // 获取当前canvas中指定位置的图片数据
            // ctx.getImageData()
            // 将新的imgData放入在canvas中
            // ctx.putImageData()
            var imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
          
            for(var i=0;i<imgData.data.length;i+=4){
                if(imgData.data[i]<193 && imgData.data[i]>133 && imgData.data[i+1]<210 && imgData.data[i+1]>150 && imgData.data[i+2]<255 && imgData.data[i+2]>201){
                    imgData.data[i+3]=0;
                }
            }
            ctx.putImageData(imgData,0,0);
        }




    </script>
</body>
</html>